<template>
<div>
    <div class="mar"><span>{{shownum}}</span>分<p>平均得分</p></div>
   <ve-line :data="chartData" :settings="chartSettings"></ve-line>
   </div>
</template>

<script>
export default {
data () {
      this.chartSettings = {
        axisSite: { right: ['score','均匀率', '压感'] },
        // yAxisType: ['', 'percent'],
        // yAxisName: ['数值', '比率']
       yAxis: {
        name: 'y',
        min: -100,
        max: 100,
        minorTick: {
            show: true
        },
        splitLine: {
            lineStyle: {
                color: '#999'
            }
        },
        minorSplitLine: {
            show: true,
            lineStyle: {
                color: '#ddd'
            }
        },
    },
      }
      return {
        chartData: {
          columns: ['date', 'score', '均匀率', '压感'],
          rows: []
        },
      }
    },
    computed: {
        shownum:function(){
            let shown=0;
            for(let i = 0;i<this.chartData.rows.length;i++){
               shown+=parseInt(this.chartData.rows[i].score);
            }
            return parseInt(shown/this.chartData.rows.length);
            console.log(shown);
            console.log(this.chartData.rows.length);
        }  
    },
   beforeCreate () {
     this.$http.get('/api/s/month').then(({
                    data,
                    config
                }) =>{
                    //解构语法
                    console.log(data);
                    this.chartData.rows=data.data
                }) 
    }
}
</script>

<style scoped>
.mar{
    text-align: center;
    line-height: 3rem;
}
span{
    font-size: 1rem;
}
p{
    margin-top: -2.5rem;

}
.line{
    margin-top: 1rem;
}
</style>